Grid System হল একটি ওয়েব ডিজাইন এবং লেআউট তৈরির মৌলিক উপাদান, যা একটি ওয়েব পেজের কন্টেন্ট এবং উপাদানগুলিকে একটি সুশৃঙ্খল ও সুবিন্যস্ত উপায়ে সাজানোর জন্য ব্যবহৃত হয়। Pure.CSS-এর Grid System ব্যবহার করে, আপনি খুব সহজে রেস্পন্সিভ ওয়েব পেজ তৈরি করতে পারেন যা বিভিন্ন স্ক্রীন সাইজে ঠিকমতো প্রদর্শিত হবে। Pure.CSS এর Grid System সহজ, হালকা, এবং নমনীয়, যা ডেভেলপারদের দ্রুত এবং কার্যকরী লেআউট তৈরিতে সাহায্য করে।
Grid System কি এবং কেন ব্যবহার করবেন?
Grid System এমন একটি লেআউট স্ট্রাকচার যা একটি পৃষ্ঠার উপাদানগুলিকে গ্রিডের মতো কলাম এবং সারিতে বিভক্ত করে। এই গ্রিডের মাধ্যমে কন্টেন্ট সহজে সাজানো হয় এবং এটি রেস্পন্সিভ ডিজাইন নিশ্চিত করে, যাতে ওয়েবসাইটটি ডেস্কটপ, ট্যাবলেট বা মোবাইল যেকোনো ডিভাইসে সঠিকভাবে দেখায়।
Pure.CSS এর Grid System এর প্রধান বৈশিষ্ট্যসমূহ:
- মডুলার এবং নমনীয়: Pure.CSS একটি মডুলার গ্রিড সিস্টেম প্রদান করে, যেখানে আপনি সহজেই আপনার প্রয়োজন অনুযায়ী কলাম সিস্টেম নির্ধারণ করতে পারেন। Pure.CSS-এ flexbox এবং float এর সংমিশ্রণ ব্যবহৃত হয়েছে, যা গ্রিড সিস্টেমকে অত্যন্ত নমনীয় করে তোলে।
- ১২ কলাম গ্রিড: Pure.CSS এর গ্রিড সিস্টেম ১২টি কলামের উপর ভিত্তি করে কাজ করে। আপনি ১২টি কলাম থেকে বিভিন্ন উপায়ে আপনার কন্টেন্ট সাজাতে পারবেন, যেমন 1 কলাম, 2 কলাম, 3 কলাম, অথবা 6 কলাম ইত্যাদি।
- রেস্পন্সিভ ডিজাইন: Pure.CSS এর গ্রিড সিস্টেম সম্পূর্ণরূপে রেস্পন্সিভ ডিজাইন সাপোর্ট করে, অর্থাৎ এটি মোবাইল, ট্যাবলেট, এবং ডেস্কটপ স্ক্রীনে একে অপরের সাথে সামঞ্জস্য রেখে উপাদানগুলি প্রদর্শন করতে সক্ষম।
- সহজ ব্যবহার: Pure.CSS এর গ্রিড সিস্টেম খুবই সহজ এবং স্বাভাবিকভাবে ব্যবহৃত হয়। কেবলমাত্র CSS ক্লাস ব্যবহার করে গ্রিডের কলাম এবং সারি তৈরী করা যায়।
Pure.CSS Grid System এর কিভাবে ব্যবহার করবেন?
Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করার জন্য, আপনাকে কেবলমাত্র কিছু সহজ CSS ক্লাস প্রয়োগ করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে ১২-কলাম গ্রিড সিস্টেম ব্যবহার করা হয়েছে:
উদাহরণ ১: বেসিক গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<div style="background-color: lightblue; padding: 20px;">Column 1 (50%)</div>
</div>
<div class="pure-u-1-2">
<div style="background-color: lightgreen; padding: 20px;">Column 2 (50%)</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-g ক্লাস গ্রিড সিস্টেমের জন্য ব্যবহৃত হচ্ছে।
- pure-u-1-2 ক্লাস দ্বারা দুটি কলাম তৈরি করা হয়েছে, যেখানে প্রতিটি কলাম পেজের ৫০% জায়গা দখল করবে।
উদাহরণ ২: ৩টি কলাম গ্রিড সিস্টেম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">
<div style="background-color: lightcoral; padding: 20px;">Column 1 (33%)</div>
</div>
<div class="pure-u-1-3">
<div style="background-color: lightgoldenrodyellow; padding: 20px;">Column 2 (33%)</div>
</div>
<div class="pure-u-1-3">
<div style="background-color: lightseagreen; padding: 20px;">Column 3 (33%)</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-u-1-3 ক্লাস ব্যবহার করে ৩টি কলাম তৈরি করা হয়েছে, প্রতিটি কলাম ৩৩.৩৩% স্পেস দখল করছে।
উদাহরণ ৩: রেস্পন্সিভ গ্রিড সিস্টেম
Pure.CSS এর গ্রিড সিস্টেম রেস্পন্সিভ ডিজাইন সাপোর্ট করে, তাই আপনি একটি নির্দিষ্ট ডিভাইসের জন্য আলাদা কলাম সাইজ নির্ধারণ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightblue; padding: 20px;">Column 1</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightgreen; padding: 20px;">Column 2</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightyellow; padding: 20px;">Column 3</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div style="background-color: lightcoral; padding: 20px;">Column 4</div>
</div>
</div>
</body>
</html>
এখানে:
- pure-u-1: মোবাইল বা ছোট স্ক্রীনের জন্য পুরো পেজের ১০০% ব্যবহার করবে।
- pure-u-md-1-2: মিডিয়াম স্ক্রীন (ট্যাবলেট) এর জন্য ৫০% কলাম ব্যবহার করবে।
- pure-u-lg-1-4: বড় স্ক্রীন (ডেস্কটপ) এর জন্য ২৫% কলাম ব্যবহার করবে।
Pure.CSS Grid System এর সুবিধাসমূহ
- সহজ এবং নমনীয়: Pure.CSS-এর গ্রিড সিস্টেম খুব সহজ, এবং আপনি সহজেই বিভিন্ন স্ক্রীন সাইজে ওয়েবপেজ লেআউট তৈরি করতে পারেন। এটি সম্পূর্ণভাবে রেস্পন্সিভ, যাতে আপনার ওয়েব অ্যাপ্লিকেশন মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে কাজ করবে।
- কম্প্যাক্ট এবং হালকা: Pure.CSS একটি হালকা ওজনের ফ্রেমওয়ার্ক, যা দ্রুত লোড হয় এবং আপনার ওয়েব পেজের পারফরমেন্সে কোনও বিরূপ প্রভাব ফেলে না। এটি ছোট সাইজে আসে এবং খুব কম কোডের মাধ্যমে কার্যকরী গ্রিড সিস্টেম তৈরি করতে সক্ষম।
- মডুলার: Pure.CSS গ্রিড সিস্টেম মডুলারভাবে ডিজাইন করা হয়েছে। আপনি যেটুকু প্রয়োজন, সেটুকু ব্যবহার করতে পারেন এবং অন্যান্য অংশ বাদ দিয়ে খুব সহজে কাস্টমাইজ করতে পারেন।
- রেস্পন্সিভ এবং প্লাগএবল: Pure.CSS-এর গ্রিড সিস্টেম বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে রেস্পন্সিভ হয়ে যায়, এবং এতে প্লাগএবল মডিউল ব্যবহার করতে পারেন।
Pure.CSS Grid System হল একটি অত্যন্ত শক্তিশালী, নমনীয়, এবং রেস্পন্সিভ সিস্টেম, যা সহজভাবে ওয়েব লেআউট ডিজাইন করতে সাহায্য করে। এর হালকা ডিজাইন এবং ছোট সাইজ, আপনাকে ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত তৈরি এবং অপটিমাইজ করতে সহায়তা করে। Pure.CSS এর গ্রিড সিস্টেম ব্যবহারের মাধ্যমে আপনি একটি কার্যকরী, ব্যবহারবান্ধব এবং রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করতে পারবেন, যা বিভিন্ন ডিভাইসের সাথে উপযুক্তভাবে কাজ করবে।
Read more
